<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<style type="text/css">

    p{
        width: 150px;
        margin: 15px;
        padding: 5px;
        border: medium double black;
        background-color: lightgrey;
        float: left;
        /* 首行缩进 */
        text-indent: 15%;
        /* 文本块装饰效果 */
        text-decoration: line-through;
        /* 文本转换大小写 */
        text-transform: uppercase;
    }

    #first{
        /* 断词 */
        word-wrap: break-word;
    }

    #second{
        /* 断词 */
        word-wrap: normal;
    }
</style>

<body>
    <p id="first">
        There are lots of different kinds of fruit - there are over 500 varieties
        of madeupfruitwithaverylongname alone.
    </p>
    <p id="second">
        There are lots of different kinds of fruit - there are over 500 varieties
        of madeupfruitwithaverylongname alone.
    </p>
</body>

</html>